<template>
  <view class="recording" v-if="recordingShow">
    <!-- 正在录音文案提示 -->
    <view class="recording-on">正在录音...</view>

    <!-- 取消发送区域 -->
    <view
      class="recording-cancel"
      @touchmove="touchMove"
      @touchstart="touchStart"
      @touchcancel="touchCancel"
      @touchend="touchEnd"
      :style="
        enterState
          ? 'box-shadow: 0 0 5rpx 5rpx #ff0000; background: #ff0000;'
          : ''
      "
      >取消发送</view
    >

    <!-- 发送提示文案 -->
    <view class="recording-send">松开发送</view>
  </view>
</template>

<script>
export default {
  name: 'RecordingLayer',
  data() {
    return {
      recordingShow: false,
      enterState: false
    };
  },

  components: {},
  props: {
    audioInfo: {
      type: Object,
      default: () => {}
    }
  },

  computed: {
    getRecordingInfo() {
      return this.audioInfo;
    }
  },

  watch: {
    getRecordingInfo(current) {
      if (current.showLayer) {
        this.enterState = false;
      }

      // 这里后续优化
      if (current.showLayer && this.recordingShow !== current.showLayer) {
        this.recordingShow = current.showLayer;
        this.$nextTick(() => {
          const query = uni.createSelectorQuery().in(this);
          query
            .select('.recording-cancel')
            .boundingClientRect(data => {
              if (data) {
                // 取消区域的中心坐标计算
                const calcX = data.width / 2 + data.left;
                const calcY = data.height / 2 + data.top;
                const circleRadius = data.width / 2;
                const tempObj = {
                  circleX: calcX,
                  circleY: calcY,
                  circleRadius
                };
                getApp().globalData.recordCancelInfo = tempObj;
              }
            })
            .exec();
        });
      } else {
        this.recordingShow = current.showLayer;
      }

      if (current.enterCancel) {
        //  进入了目标区域
        this.enterState = true;
      } else {
        // 离开了目标区域
        this.enterState = false;
      }
    }
  },

  mounted() {},

  methods: {
    touchMove() {
      console.log('recording-touch-move');
    },

    touchStart() {
      console.log('recording-touch-start');
    },

    touchCancel() {
      console.log('recording-touch-cancel');
    },

    touchEnd() {
      console.log('recording-touch-end');
    }
  }
};
</script>

<style scoped lang="scss">
.recording {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}
.item {
  border: 1px solid red;
  width: 100%;
  height: 100rpx;
}
.recording-on,
.recording-send {
  width: 100%;
  height: 100rpx;
  color: #fff;
  font-size: 30rpx;
  font-weight: bold;
  margin-top: 100rpx;
  text-align: center;
}
.recording-send {
  position: absolute;
  width: 100%;
  height: 280rpx;
  border-radius: 600rpx 600rpx 0 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 20rpx 0 0 0;
}
.recording-cancel {
  width: 200rpx;
  height: 200rpx;
  margin: 0 auto;
  background-color: #aaa;
  border-radius: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
</style>
